<template>
  <div>
    <title-bar
      :titleText="$route.meta.title"
      :needBack="false"
    >
      <!-- 返回按钮 -->
      <slot name="left">
        <i
          class="icon iconfont icon-back back-btn"
          @click="back()"
        ></i>
      </slot>
      <slot>
        <!-- 标题 -->
        <span class="title-text">注册账号</span>
      </slot>
    </title-bar>
    <!-- 输入区域 -->
    <div class="input-warpper">
      <!-- 手机号输入组件 -->
      <username-input
        ref="myUsername"
        :username="username"
      ></username-input>
      <!-- 验证码输入组件 -->
      <sms-code-input
        ref="mySmsCode"
        :smsCode="smsCode"
        :smscodeType="smscodeType"
      ></sms-code-input>
      <!-- 密码输入组件 -->
      <password-input
        ref="myPassword"
        :password="password"
        :isShowPwdIcon="isShowPwdIcon"
        :isPlaceholdertLength="isPlaceholdertLength"
      ></password-input>
      <!-- 用户协议单选框 -->
      <agreement-radio ref="myAgreementRadio"></agreement-radio>
      <!-- <div class="flex-h flex-vc phone-wapper">
        <i class="icon iconfont icon-mphone fontsize48"></i>
        <input
          type="text"
          class="input-cmomon flex1 input-phone"
          v-model.trim="phone"
          placeholder="请输入手机号码"
        />
        <i
          v-show="phone?true:false"
          class="icon iconfont icon-cancel-o fontsize36"
          @click="clearPhone()"
        ></i>
      </div> -->
      <!-- <div class="flex-h flex-vc sms-wapper">
        <i class="icon iconfont icon-verification fontsize48"></i>
        <input
          type="text"
          class="input-cmomon input-sms"
          v-model.trim="sms"
          placeholder="请输入短信验证码"
        />
        <i
          v-show="sms?true:false"
          class="icon iconfont icon-cancel-o fontsize36"
          @click="clearSmsCode()"
        ></i>
        <button
          class="sms-code-btn"
          :class="this.countDownSecond===0?'baseBgColorNoActive':'baseBgColorInvalid'"
          @click="getSmsCode()"
        >{{smsCodeBtnTxt}}</button>
      </div> -->
      <!-- <div class="flex-h flex-vc password-wapper">
        <i class="icon iconfont icon-password fontsize48"></i>
        <input
          type="password"
          class="input-cmomon flex1 input-password"
          v-model="password"
          placeholder="请输入密码（6-20位）"
        />
        <i
          v-show="password?true:false"
          class="icon iconfont icon-cancel-o fontsize36"
          @click="clearPassword()"
        ></i>
      </div> -->
      <!-- 用户协议单选框 -->
      <!-- <div class="user-agreement-warpper">
        <i
          class="icon iconfont fontsize32 baseColorNoAcitve"
          :class="isSelectAgreement?'icon-circle-o':'icon-circle'"
          @click="isSelectAgreement=!isSelectAgreement"
        ></i>
        <span
          class="fontsize22"
          @click="isSelectAgreement=!isSelectAgreement"
        >我已阅读并同意</span>
        <span
          class="baseColorNoAcitve"
          @click="gotoAgreemen()"
        >《用户协议》</span>
      </div> -->
      <!-- 确定注册按钮 -->
      <button
        class="baseBgColorNoActive fontsize28 register-btn"
        @click="register()"
      >确定</button>
    </div>
    <img
      v-if="isShowBottomImg"
      class="bottom-img"
      src="./../assets/login-bottom.png"
    />
  </div>
</template>

<script>
import UsernameInput from '../components/UsernameInput'
import SmsCodeInput from '../components/SmsCodeInput'
import PasswordInput from '../components/PasswordInput'
import AgreementRadio from '../components/AgreementRadio'
import md5 from 'js-md5'
import { TitleBar } from 'vue-xb-ui-depot'
import { register } from '../api/api'
import { setUserInfoJumpLogin } from '../utils/loginCommon'
import { validatePromiseAll } from '../utils/validateForm'
export default {
  components: {
    usernameInput: UsernameInput,
    smsCodeInput: SmsCodeInput,
    passwordInput: PasswordInput,
    agreementRadio: AgreementRadio,
    TitleBar
  },
  data() {
    return {
      username: '', // 手机号
      smsCode: '', // 短信验证码
      smscodeType: 2, // 发送验证码类型：1:通用验证码，2:注册验证码，3:忘记密码验证码，4:第三方登录验证码绑定手机号（微信）
      // smsCodeBtnTxt: '获取验证码', // 短信验证码文案
      isShowPwdIcon: false, // 密码眼睛图标是否展示
      isPlaceholdertLength: true, // 密码placeholder是否有长度提示
      password: '', // 密码
      isSelectAgreement: false, // 是否选中用户协议
      isShowBottomImg: window.isShowBottomImg// 是否展示底部图片
      // countDownSecond: 0, // 倒计时秒数
      // countDownTimer: null// 倒计时计时器
    }
  },
  mounted() {
  },
  updated() {
    if (this.$refs.mySmsCode.countDownTimer) {
      clearInterval(this.$refs.mySmsCode.countDownTimer)
    }
  },
  methods: {
    back() { // 返回
      // 离开清除计时器
      if (this.$refs.mySmsCode.countDownTimer) {
        clearInterval(this.$refs.mySmsCode.countDownTimer)
      }
      this.$router.back(-1)
    },
    register() { // 登录
      let username = this.$refs.myUsername.username
      let smsCode = this.$refs.mySmsCode.smsCode
      let password = this.$refs.myPassword.password
      let isSelectAgreement = this.$refs.myAgreementRadio.isSelectAgreement
      validatePromiseAll({
        checkArray: [{
          type: 'username',
          value: username
        }, {
          type: 'smscode',
          value: smsCode
        }, {
          type: 'password',
          value: password
        }, {
          type: 'agreement',
          value: isSelectAgreement
        }],
        successCallback: (dataArray) => {
          register(
            username,
            smsCode,
            md5(password),
            this.$parent.cid,
            this.$parent.mobileModel,
            this.$parent.mobileVersion,
            this.$parent.appVersion
          ).then(res => {
            res.PHONE = username
            setUserInfoJumpLogin(res, this)
            this.$toastMsg('登录成功')
          }).catch(err => {
            console.log(err)
          })
        },
        errorCallback: (error) => {
          console.log('表单校验失败：' + error)
          this.$toastMsg(error)
        }
      })

      // if (username === '') {
      //   this.$toastMsg('请输入手机号码')
      //   return false
      // } else if (!/^1[3-9]\d{9}$/.test(username)) {
      //   this.$toastMsg('手机号码格式不正确')
      //   return false
      // }
      // if (smsCode === '') {
      //   this.$toastMsg('请填写收到的验证码')
      //   return false
      // }
      // if (password === '') {
      //   this.$toastMsg('请输入密码')
      //   return false
      // } else if (password.length < 6 || password.length > 20) {
      //   this.$toastMsg('请输入密码(6-20)')
      //   return false
      // } else {
      //   password = md5(password)
      // }
      // if (!isSelectAgreement) {
      //   this.$toastMsg('请阅读并同意《用户协议》')
      //   return false
      // }
      // register(
      //   username,
      //   smsCode,
      //   password,
      //   this.$parent.cid,
      //   this.$parent.mobileModel,
      //   this.$parent.mobileVersion,
      //   this.$parent.appVersion
      // ).then(res => {
      //   res.PHONE = username
      //   setUserInfoJumpLogin(res,this)
      //   this.$toastMsg('登录成功')
      // }).catch(err => {
      //   console.log(err)
      // })
    }
  }
}
</script>

<style scoped>
.title-text {
  color: #333;
}
/* 输入组件包裹成 */
.input-warpper {
  padding: 60px 30px 0 30px;
}
/* 输入模块 */
/* .phone-wapper,
.sms-wapper,
.password-wapper {
  width: 690px;
  height: 112px;
  border-bottom: 1px solid #f2f5f6;
} */
/* 手机号、密码图标 */
.icon-mphone,
.icon-verification,
.icon-password {
  color: #333;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
/* 默认输入框样式 */
/* .input-cmomon {
  font-size: 32px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333;
  height: 45px;
  line-height: 45px;
  margin: 0 26px;
  border: none;
} */
/* 验证码入框 */
/* .input-sms {
  width: 100%;
} */
/* 获取验证码按钮 */
/* .sms-code-btn {
  color: #fff;
  width: auto;
  height: 50px;
  margin-left: 20px;
  padding: 0 20px;
  border-radius: 8px;
  border: none;
  white-space: nowrap;
} */
/* 清空图标样式 */
/* .icon-cancel-o {
  color: #ccc;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
} */
/* .sms-wapper,
.password-wapper {
  margin-top: 32px;
} */
/* .user-agreement-warpper {
  margin-top: 20px;
} */
/* 注册按钮 */
.register-btn {
  color: #fff;
  width: 690px;
  height: 80px;
  line-height: 80px;
  margin-top: 100px;
  border-radius: 8px; /*px*/
  border: none;
}
/* 底部图片 */
.bottom-img {
  width: 750px;
  height: 156px;
  position: absolute;
  bottom: 0;
  left: 0;
}
</style>
